<template>
  <view class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="报警列表"
      back-icon-color="#fff"
      title-color="#fff"
    >
    </u-navbar>

    <div class="flex">
      <customerSearch
        isCountyName="countyStr"
        isCountyId="countyNo"
        isCustomerName="customerName"
        isCustomerId="mineCode"
        mineUrl="/cjt/common/getCustomerList"
        countyUrl="/alarm/common/getCountys"
        :getSearchData="searchData"
        @searchList="searchList"
      ></customerSearch>
      <!-- <u-input
        v-model="searchData.customerStr"
        placeholder="请选择煤矿"
        type="select"
        @click="cityShow = true"
        :select-open="cityShow"
      /> -->
      <u-input
        v-model="searchData.alarmTypeStr"
        placeholder="请选择报警类型"
        type="select"
        @click="cityShow2 = true"
        :select-open="cityShow2"
        style="background-color: rgba(0,0,0,0.02);"
      />
    </div>

    <div class="mine-num">
      报警数量
      <span class="mine-num-val">{{ total }}</span>
    </div>

    <scroll-view
      :scroll-y="true"
      class="u-flex-1 of-hide"
      style="height: 200px;"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower"
    >
      <view
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="u-p-20">
          <div class="list-item-status">
            <span class="list-name">{{ item.alarmType }}</span>
            <span
              class="list-qu m-l-10 list-item-over"
              :style="{
                background: item.isOver === '1' ? 'rgba(0,0,0,0.1)' : 'red',
              }"
            >
              {{ item.isOver === "1" ? "已结束" : "未结束" }}
            </span>
          </div>
        </div>
        <div class="ppBox">
          <span class="list-qu m-l-10">{{ item.customerName }}</span>
        </div>
        <div class="ppBox">
          <div class="list-qu m-l-10">报警开始时间：{{ item.beginTime }}</div>
        </div>
        <div class="ppBox">
          <div class="list-qu m-l-10">
            报警结束时间：{{ item.endTime || "/" }}
          </div>
        </div>
        <div class="ppBox">
          <div class="list-qu m-l-10">报警描述：{{ item.alarmContent }}</div>
        </div>
      </view>
      <template v-if="!showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty
            text="抱歉，暂无相关数据~"
            :src="require('@/static/image/empty.png')"
          ></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <u-picker
      mode="selector"
      v-model="cityShow"
      :range="customerList"
      range-key="label"
      @confirm="cityConfirm"
    ></u-picker>
    <u-picker
      mode="selector"
      v-model="cityShow2"
      :range="alarmTypeList"
      range-key="label"
      @confirm="cityConfirm2"
    ></u-picker>
  </view>
</template>

<script>
import customerSearch from "@/pages/components/customerSearch.vue";
import paging from '@/pages/common/paging.js';
export default {
  mixins: [paging],
  components: { customerSearch },
  data() {
    return {
      tuImg: require("@/static/image/cjt/tu.png"),
      ranImg: require("@/static/image/cjt/ran.png"),
      baoImg: require("@/static/image/cjt/bao.png"),
      congImg: require("@/static/image/cjt/cong.png"),
      suiImg: require("@/static/image/cjt/sui.png"),
      reImg: require("@/static/image/cjt/re.png"),
      emitEvent: "cjt_mineList",
      total: "",
      searchData: {
        countyNo: "",
        countyStr: "所有区县",
        customerStr: "",
        customerNo: "",
        customerId: "",
        customerName: "",
        customerCode: "",
        pageSize: 5,
        pageNumber: 1,
      },
      cityShow: false,
      cityShow2: false,
      customerList: [],
      alarmTypeList: [],
    };
  },
  onLoad(options) {
    console.log('options',options);
    
    this.$set(this.searchData, "mineCode", options.customerId);
    // this.searchData.customerCode = options.customerCode
    this.searchData.customerName = options.customerName;
    if (getApp().globalData.userInfo.superviseLevel !== "40") {
      this.searchData.countyNo = getApp().globalData.userInfo.countyNo;
    } else {
      this.searchData.countyNo = options.countyNo;
    }
    this.getList();
    // this.getCustomerList();
    this.getAlarmTypesLabel();
  },

  methods: {
    getAlarmTypesLabel() {
      this.$get("/alarm/recording/getAlarmTypesLabel").then((res) => {
        this.alarmTypeList = res.body;
      });
    },
    cityConfirm(index) {
      this.searchData.customerStr = this.customerList[index].label;
      this.searchData.customerId = this.customerList[index].id;
      this.getData();
    },
    cityConfirm2(index) {
      this.searchData.alarmTypeStr = this.alarmTypeList[index].label;
      this.searchData.alarmType = this.alarmTypeList[index].id;
      this.listData = [];
      this.searchData.pageNumber=1
      this.getList();
    },
    getCustomerList() {
      this.$get(
        // "/cjt/common/getCustomerList?countyNo=" + this.searchData.countyNo
        "/cjt/common/getCustomerList"
      ).then((res) => {
        this.customerList = res.body;
      });
    },
    searchList(e) {
      this.searchData.pageNumber = 1;
      // this.status = "loading";
      this.searchData.customerId
      this.searchData = Object.assign(this.searchData, e);
      this.status = "loading";
      this.listData = [];
      this.getList();
    },
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = true;
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getList();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      console.log("onScrollToLower");
      if (this.status === "loading") {
        console.log('loadingloadingloading--');
        
        this.searchData.pageNumber++;
        this.getList();
      }
    },
    async getList() {
      this.$set(this.searchData, "customerId", this.searchData.mineCode);
      const res = await this.$post(
        "/cjt/app/getCustomerAlarmInfo/",
        this.searchData
      );
      if (res && res.body.content) {
        this.list =
          this.searchData.pageNumber === 1
            ? res.body.content
            : this.list.concat(res.body.content);
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (
          this.searchData.pageNumber === 1 &&
          this.list &&
          this.list.length === 0
        ) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }

        this.total = res.body.total;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
  border-radius: 6px !important;
  position: relative;
  margin: 10px;
  .list-item-status {
    display: flex;
    justify-content: space-between;
    .list-item-over {
      color: white;
      padding: 0 15rpx;
      border-radius: 10rpx;
    }
  }

  .zcsc {
    background: rgb(74, 220, 172);
    border-radius: 0 6px 6px 0;
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    margin-top: 10px;
    display: inline-block;
  }

  .list-name {
    font-size: 16px;
    font-weight: 500;
  }

  .list-qu {
    color: rgb(102, 102, 102);
  }

  .tag-box {
    background: rgba(255, 67, 0, 0.2);
    display: flex;
    width: 40px;
    margin-right: 10px;
    .tag-item {
      display: block;
      height: 16px;
      width: 100%;
      text-align: center;
      line-height: 16px;
      color: rgb(255, 67, 0);
      font-size: 14px;
    }

    img {
      display: block;
      width: 16px;
      height: 16px;
      margin: 0;
    }
  }
}

.text-center {
  text-align: center;
}

.mine-num {
  text-align: center;
  height: 66px;
  background: #fff;
  line-height: 60px;
  color: #fff;
  background: url("/static/image/cjt/cjnxzc.png");
  background-size: 100% 100%;
  margin: 10px;
  margin-top: 0;

  .mine-num-val {
    font-size: 30px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}

.jhsc-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding-top: 10px;

  .jhsc-name {
    padding: 10px;
  }
}
.gzm-zc {
  background: linear-gradient(
    rgba(10, 207, 151, 0.5),
    rgba(167, 238, 217, 0.5)
  );
}
.gzm-jz {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}
.gzm-cxjz {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}
.gzm-box {
  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    text-align: center;
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5), rgba(239, 220, 166, 0.5));
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255), rgba(224, 249, 255, 0.85));
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}
.u-input {
  //   flex: none;
  background: #fff;
  border-radius: 15px;
  margin: 10px;
}
/deep/ .uni-input-input {
  padding-left: 20px;
}
.uni-input-placeholder {
  margin-left: 20px;
}
/deep/ .u-input__right-icon {
  margin-right: 15px;
}
.ppBox {
  padding: 5px 10px;
}
.serchCom {
  width: 214px;
}
</style>
